<template>
<div>
    <div class="badge" :style="badgeStyle" v-if="isBadge">
        <slot></slot>
    </div>
    <div class="dot" :style="badgeStyle" v-else></div>
</div>
</template>
<script>
export default {
    props:{
        badgeStyle:{
            type:String,
            default:''
        },
        isBadge:{
            type:Boolean,    //圆点或是count
            default:true
        }
    }
}
</script>
<style scoped>
   .badge{
       position: absolute;
        padding: .1rem .25rem;
        font-size: .5rem;
        color: #ffffff;
        background-color: #ff0000;
        text-align: center;
        border-radius: 5rem;
    }
    .dot{
        position: absolute;
        width: .3rem;
        height: .3rem;
        background-color: #ff0000;
        border-radius: 50%;
    }
</style>